<template>
  <div class="set-params" @click="$event => $event.stopPropagation()">
    <!--  header  -->
    <div class="header">
      <span class="popup-name">{{currentNode.name}} 算法配置</span>
      <a-icon class="close-btn" type="close" @click="$emit('done')" />
    </div>
    <!--  body  -->
    <div class="description">
      <div class="table-container">
        <div
          v-for="(p, idx) in setParams"
          :key="idx"
        >
         <div class="params-item">
           <div class="configuration-item-name">
             <div class="item-name">
               <a-tooltip placement="top">
                 <template slot="title">
                   <span>{{p.name}}</span>
                 </template>
                 <div class="item-name-text">
                   {{p.name}}
                 </div>
               </a-tooltip>
             </div>
             <div>:</div>
           </div>
           <!-- 数值型参数 -->
           <div v-if="p.type === 'number'" class="configuration-item-info">
             <a-input-number
               v-model="p.value"
               class="params-input"
             />
           </div>
           <!-- 字符串型参数 -->
           <div v-if="p.type === 'string'" class="configuration-item-info">
             <a-input
               ref="paramInput"
               v-model="p.value"
               type="string"
               :placeholder="p.value"
               class="params-input"
             ></a-input>
           </div>
           <!--  复选框参数 feature_cols  输入列 -->
           <div v-if="p.type === 'checkbox'" class="checkbox-item-info">
             <div v-if="p.newFeatures.length === 0" class="no-father-node">--  请确认节点父子关系  --</div>
             <!-- 多张表 的情况  -->
             <div v-for="(item, index) in p.newFeatures" :key="'output' + index">
               <div
                 v-if="index === 0"
                 :class="{'parting-line': index > 0}"
               >
                 <!-- 全选 todo 多表问题 多张表用一个 value array-->
                 <!-- 20200918  NAP 424 只显示第一张表-->
                 <span class="select-all">
                    <a-checkbox
                      :checked="item.tableCols.length === p.value.length"
                      @change="selectAll(item, index, idx, $event)"
                    >全选</a-checkbox>
                  </span>
                 <br/>
                 <!-- value： Array<string> '表名.列名' -->
                 <span
                   v-for="(item2, index2) in item.tableCols"
                   :key="index2" class="checkbox-label"
                 >
                    <a-checkbox
                      :checked="p.value.includes(item.tableName + '.' + item2)"
                      :value="item2"
                      @change="onChange($event,  idx, item.tableName)"
                    >
                      <a-tooltip placement="top">
                        <template slot="title">
                          <!-- <span>{{item2}}({{transformColumnType(item.columnTypes[index2])}})</span>-->
                          <span>{{item2}}({{item.columnTypes[index2]}})</span>
                        </template>
                        <span class="btn">
                          {{item2}}
                        </span>
                      </a-tooltip>
                    </a-checkbox>
                 </span>
                 <br/>
               </div>
             </div>

           </div>
           <!-- select 参数 -->
           <div  v-if="p.type === 'select'"  class="configuration-item-info">
             <a-select v-model="p.value" class="params-select">
               <a-select-option v-for="(item, index) in p.items" :key="index" :value="item">
                 {{item}}
               </a-select-option>
             </a-select>
           </div>
           <span class="help-tips">
              <a-tooltip placement="top">
                 <template slot="title">
                   <span>{{p.tips}}</span>
                 </template>
                 <a-icon-font
                   type="iconbangzhu"
                 />
               </a-tooltip>
           </span>
         </div>
        </div>
      </div>
    </div>
    <!--  footer  -->
    <div class="buttons">
      <div class="btn import-btn" @click="confirm()">确定</div>
      <div class="btn cancel-btn" @click="$emit('done')">取消</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import {Prop} from 'vue-property-decorator'

@Component
export default class SetParameters extends Vue {
  @Prop({
      type: Object,
      default: () => {return {}}
   })
  currentNode!: any
  public setParams: any = []

  public beforeMount() {
      this.setParams = this.currentNode.data.setParams
  }
  public mounted() {
    // (document.querySelector('.overlay') as HTMLDivElement).addEventListener('click', this.closePopup)
  }

  public closePopup() {
    this.$emit('done')
  }

  // 输入列选择
  public onChange(event: any, idx: number, tableName: string) {
    if(event.target.checked) {
      this.setParams[idx].value.push(`${tableName}.${event.target.value}`)
    }else {
      // value： Array<string>  '表名.列名'
      const index =  this.setParams[idx].value.indexOf(`${tableName}.${event.target.value}`)
      if(index > -1) {
        this.setParams[idx].value.splice(index, 1)
      }
    }
  }

  /**
   * 全选功能
   * @param item 输入表
   * @param index 表索引
   * @param idx 参数索引
   */
  public selectAll(item: any, index: number, idx: number, $event: any) {
    if($event.target.checked) {
      item.tableCols.forEach((column: string) => {
        const selectIndex =  this.setParams[idx].value.indexOf(`${item.tableName}.${column}`)
        if(selectIndex < 0 ) {
          this.setParams[idx].value.push(`${item.tableName}.${column}`)
        }
      })
    }else {
      item.tableCols.forEach((column: string) => {
        const selectIndex =  this.setParams[idx].value.indexOf(`${item.tableName}.${column}`)
        if(index > -1) {
          this.setParams[idx].value.splice(selectIndex, 1)
        }
      })
    }

    // this.setParams[idx].value
  }

  // 确认编辑
  public confirm() {
    // 校验 string input value
    const verifyValue = true
    // this.setParams.forEach((parametersItem: any) => {
    //   if(parametersItem.type === 'string') {
    //     const c = /^[A-Za-z]\w{1,20}$/
    //     verifyValue = c.test(parametersItem.value)
    //   }
    // })
    if(verifyValue) {
      this.$emit('confirm', {setParams: this.setParams})
    }else {
      this.$message.warning('输入值不合法, 请检查！')
    }
  }

  private transformColumnType(type: string){
    switch(type){
      case 'varchar':
        return '字符串'
      case 'date':
        return '日期'
      case 'int':
        return '整数'
      case 'decimal':
        return '小数'
      case 'text':
        return '文本'
      default:
        return '不知名类型'
    }
  }

}
</script>

<style lang="less" scoped>
@import '@/components/studio/data/popup/setParams';

.set-params.window {
  height: 60%;
  max-height: 600px;
  max-width: 800px;
  min-width: 500px;
  width: 40%;
}

/* 内容 */
.description {
  font-size: 16px;
  height: calc(100% - 109px);
  overflow-y: auto;
  padding: 12px 24px 0;

  /* 滚动条 */
  &::-webkit-scrollbar {
    height: 10px;
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #333;
  }

  &::-webkit-scrollbar-corner {
    background: #179a16;
  }

  .table-container {
    .params-item {
      align-items: center;
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      width: 100%;
      /* 配置名称 */
      .configuration-item-name {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding-right: 10px;
        width: 25%;

        .item-name {
          align-items: center;
          cursor: pointer;
          display: flex;
          justify-content: flex-end;
          width: 90%;

          .item-name-text {
            font-size: 14px;
            max-width: 100%;
            overflow: hidden;
            text-align: right;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      /* 配置项 */
      .configuration-item-info {
        display: flex;
        flex-wrap: wrap;
        width: calc(75% - 26px);

        .params-input {
          width: 100%;
        }

        .params-select {
          width: 100%;
        }
      }
      /* 帮助 */
      .help-tips {
        cursor: pointer;
        font-size: 18px;
        line-height: 100%;
        padding-left: 6px;
        width: 20px;
      }

      /* 输入列选择 */
      .checkbox-item-info {
        background-color: #fafafa;
        display: flex;
        flex-direction: column;
        padding: 12px;
        width: calc(75% - 26px);

        /*.table-name {*/
        /*  display: inline-block;*/
        /*  font-size: 14px;*/
        /*  height: 32px;*/
        /*  line-height: 32px;*/
        /*}*/

        .select-all {
          display: inline-block;
          height: 21px;
          line-height: 21px;
          margin-bottom: 6px;
        }

        .parting-line {
          border-top: 1px solid rgba(0, 0, 0, 0.35);
          margin-top: 12px;
          padding-top: 12px;
        }

        .checkbox-label {
          display: inline-block;
          margin-left: 0;
          overflow: hidden;
          padding-right: 12px;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 25%;

          /deep/ .ant-checkbox-wrapper {
            align-items: center;
            display: flex;
            width: 100%;

            >span:last-child {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: calc(100% - 18px);

              .btn {
                display: inline-block;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }

        .no-father-node {
          color: #888;
          font-size: 14px;
          font-style: italic;
        }
      }
    }

  }
}

.row {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;

  .label {
    flex-basis: 25%;
  }

  .value {
    flex-basis: 75%;
  }
}

</style>
